<template>
  <div>
    <el-card class="maincardstyle">
      <!-- 标题 -->
      <h1 style="text-align: center">
        {{ $t("WorkOrder.ProcessWorkOrder") }} 
      </h1>

      <!-- 表头 -->
      <div class="borderS">
        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> PWO NO </el-text>
            ：{{ formatOrderNo(headerData?.order_No) }}
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> Material No </el-text>
            ： {{ headerData?.matL_No }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Batch No </el-text>
            ： {{ headerData?.batch_no }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> Rel Date </el-text>
            ： {{ headerData?.Order_Start_Date }}
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> Deseription </el-text>
            ：{{ headerData?.matl_Des }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Planned Qty </el-text>
            ： {{ headerData?.qty }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> Plant </el-text>
            ： SG
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> Mat. Type </el-text>
            ：{{ headerData?.xxxx }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Prd. Version </el-text>
            ： {{ headerData?.production_version }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth">Schedule S.Date </el-text>
            ： {{ headerData?.Order_Start_Date }}
          </el-col>
          <el-col class="borderS" :span="9">
            <el-text class="labelWidth"> LABEL </el-text>
            ：
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> BOM AIt. </el-text>
            ： {{ headerData?.bom_Alt }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> Worked By </el-text> ：
          </el-col>
          <el-col class="borderS headerInput" :span="9">
            {{ headerData?.worked_by }}
          </el-col>
          <el-col class="borderS" :span="8">
            <el-text class="labelWidth"> Recipe No </el-text>
            ： {{ headerData?.recipe_No }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-text class="labelWidth"> TANK NO </el-text> ：
          </el-col>
          <el-col class="borderS headerInput" :span="17">
            {{ headerData?.tank_no }}
          </el-col>
        </el-row>

        <el-row>
          <el-col class="borderS" :span="7">
            <el-row style="height: 60px">
              <el-text class="labelWidth"> Special Instruction </el-text>
            </el-row>
            <el-row>
              <el-text class="labelWidth"> Sales Notes </el-text>
            </el-row>
          </el-col>
          <el-col class="borderS" :span="9">
            <el-row style="height: 60px">
              <el-text class="headerInput" style="width: 100%">
                {{ headerData?.special_instruction }}
              </el-text>
            </el-row>
            <el-row>
              <el-text class="headerInput" style="width: 100%">
                {{ headerData?.sales_notes }}
              </el-text>
            </el-row>
          </el-col>
          <el-col class="borderS" :span="8">
            <el-row>
              <el-text class="labelWidth"> Last Batch No</el-text> ：
              {{ headerData?.lastBatch_no }}
            </el-row>
            <el-row
              style="border-top: 2px solid #000; border-bottom: 2px solid #000"
            >
              <el-text class="labelWidth"> Last Batch Date </el-text> ：
              {{ headerData?.lastBatch_date }}
            </el-row>
            <el-row>
              <el-text class="labelWidth"> Last Prod Ver </el-text> ：
              {{ headerData?.lastprod_ver }}
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 表格 -->
      <el-row class="tableS">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333' }"
        >
          <el-table-column align="center" type="index" fixed="left" />
          <el-table-column align="center" prop="step" label="Seq.No" width="" />
          <el-table-column
            align="center"
            prop="operation"
            label="Op.No"
            width=""
          />
          <el-table-column
            prop="ingre_desc"
            align="left"
            label="Comp. No / Resource / Description / Instruction"
            min-width="500"
          >
            <template #default="scope">
              <div v-if="scope.row.unit == 'KG'">
                {{ scope.row.ingre_no }} {{ scope.row.ingre_desc }}
              </div>
              <div v-if="scope.row.unit == 'INS'">
                {{ scope.row.remark }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="qty" align="center" label="QTY" width="" />
          <el-table-column prop="unit" align="center" label="UoM" width="" />
          <el-table-column
            prop="actual_usage"
            align="center"
            label="Actual Usage"
            width=""
          >
          </el-table-column>
          <el-table-column align="center" label="Check">
            <el-table-column align="center" prop="check1" label="1" width="100">
              <template #default="scope">
                <div v-if="scope.row.check1 == 0"></div>
                <div v-if="scope.row.check1 == 1">
                  <el-button type="success" :icon="Check" circle> </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="check2" label="2" width="100">
              <template #default="scope">
                <div v-if="scope.row.check2 == 0"></div>
                <div v-if="scope.row.check2 == 1">
                  <el-button type="success" :icon="Check" circle> </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="batch"
            align="center"
            label="Batch No"
            width=""
          />
        </el-table>
      </el-row>

      <el-divider />

      <!-- qa -->
      <el-row class="tableS">
        <el-table
          :data="qaData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333' }"
        >
          <el-table-column align="center" label="In Process / Final Inspection">
            <el-table-column
              prop="item_spec"
              align="center"
              label="Item"
              width=""
            />
            <el-table-column
              prop="result"
              align="center"
              label="Result"
              width=""
            >
            </el-table-column>
            <el-table-column align="center" label="Sepc">
              <el-table-column
                align="center"
                prop="lower"
                label="Lower"
                width="100"
              />
              <el-table-column
                align="center"
                prop="upper"
                label="Upper"
                width="100"
              />
              <el-table-column
                align="center"
                prop="uom"
                label="UoM"
                width="100"
              />
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <!-- 公司log -->
    <!-- <el-row>
    <div class="kx-log-box">
      技术支持：
      <img
        class="imgstyle"
        src="@/assets/images/kxauto.png"
        alt="描述图片的文字"
      />
      西安开轩自动化有限责任公司
    </div>
  </el-row> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import router from "@/router"; //路由跳转
import emitter from "@/utils/eventbus"; //引入bus
import {
  apiSearchgetPwsTableFromDatetime,
  apigetSapDataFromOrderNo,
  apigetOrderQaFromOrderNo,
  apiupdateSapData,
} from "@/api/tasksheet";
import { ElMessage, ElMessageBox } from "element-plus";
// 接受路由传参
import { useRoute } from "vue-router";

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";

const route = useRoute();
const orderNo = ref();
const headerData = ref({} as any);
const tableData = ref(); //table数组
const qaData = ref(); //qa数组
onMounted(() => {
  if (route.query.row) {
    headerData.value = JSON.parse(route.query.row as string);
    orderNo.value = headerData.value.order_No;
    getfetchList(orderNo.value); // 获取电子单列表数据
    getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  }

  emitter.on("refreshQa", async () => {
    getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  });
  emitter.on("refreshActual", async () => {
    getfetchList(orderNo.value); // 获取电子单列表数据
  });
});
// 定义处理方法
const formatOrderNo = (orderNo: string | undefined) => {
  if (!orderNo) return ""; // 如果值为空，返回空字符串
  return orderNo.slice(4); // 去掉前四个字符
};
// 获取电子单列表数据
const getfetchList = async (id: any) => {
  await apigetSapDataFromOrderNo({ order_no: id })
    .then((res: any) => {
      if (res.code == 200) {
        tableData.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// 获取Qa数据
const getOrderQaFromOrderNo = async (id: any) => {
  await apigetOrderQaFromOrderNo({ order_no: id })
    .then((res: any) => {
      if (res.code == 200) {
        qaData.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 0px;
}

.topcardstyle {
  padding: 10px 20px 10px !important;
  margin-bottom: 10px;
  // background-color: #eee;
}

.maincardstyle {
  padding: 20px;
}

.createbtnstyle {
  margin-bottom: 20px;
}

.inputstyle {
  width: 300px;
}

// 搜索
.demo-form-inline .el-name {
  --el-name-width: 220px;
}

.formstyle {
  margin-bottom: -18px;
}

// 分页
.demo-pagination-block {
  margin: 0 auto;
  margin-top: 15px;
  // margin-bottom: 35px;
}

// 小圆点
.istyleNo {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 5px;
}

.istyleOk {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  margin-right: 5px;
}

// 公司log
.kx-log-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 20px;
  line-height: 20px;
  margin-top: 15px;

  // 图片
  .imgstyle {
    width: 40px;
  }
}

.borderS {
  border: 1px solid #000;
  min-height: 30px;
  line-height: 30px;
}

.labelWidth {
  display: inline-block;
  min-width: 120px;
  padding-left: 10px;
}

.tableS {
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.headerInput {
  padding: 5px 20px;
}
::v-deep .el-table,
::v-deep .el-table__row,
::v-deep .el-table__cell {
  border: 1px solid #000 !important;
}
</style>
